<template>
  <div>
    <el-row :gutter="12">
      <el-col :span="24">
        <el-card shadow="never">
          <div class="el-icon-s-order"></div>
          数据列表
          <el-button
            @click="dialogFormVisible = true"
            size="small"
            style="float: right; margin-bottom: 20px"
          >
            添加
          </el-button>
          <el-dialog
            :title="Commodity.id ? '编辑数据' : '添加类型'"
            width="30%"
            center
            :visible.sync="dialogFormVisible"
          >
            <el-form :model="form">
              <el-form-item label="类型名称">
                <el-input
                  v-model="form.name"
                  autocomplete="off"
                  style="width: 250px"
                ></el-input>
              </el-form-item>
              <el-form-item label="类型价格">
                <el-input
                  v-model="form.price"
                  autocomplete="off"
                  style="width: 250px"
                ></el-input>
              </el-form-item>
              <el-form-item label="品牌图片" label-width="80px" prop="logoUrl">
                <el-upload
                  class="avatar-uploader"
                  action="/dev-api/admin/product/fileUpload"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                  :show-file-list="false"
                >
                  <img
                    v-if="form.mainImage"
                    :src="form.mainImage"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="determine">确 定</el-button>
            </div>
          </el-dialog>
        </el-card>
      </el-col>
    </el-row>
    <!-- 表格 @current-change="handleCurrentChange" -->
    <el-table
      highlight-current-row
      style="width: 100%; margin: 20px 0"
      border
      :data="Commodity.data"
    >
      <el-table-column
        type="index"
        width="100"
        label="编号"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="name"
        label="类型名称"
        width="width"
        align="center"
      ></el-table-column>
      <el-table-column prop="price" label="价格" width="212" align="center">
      </el-table-column>
      <el-table-column label="图片" width="212" align="center">
        <template slot-scope="{ row, $index }">
          <img style="width: 100px; height: 100px" :src="row.mainImage" />
        </template>
      </el-table-column>
      <el-table-column label="设置" width="212" align="center">
        <template slot-scope="{ row, $index }">
          <el-button size="small" @click="goattrbutelist(row)"
            >属性列表</el-button
          >
          <el-button size="small">参数列表</el-button>
        </template>
        <!-- @click="$router.push(`/parameterslist/${row.id}?parameterName=${row}`)" -->
      </el-table-column>
      <el-table-column label="操作" width="212" align="center">
        <template slot-scope="{ row, $index }">
          <el-button size="small" @click="editer(row)">编辑</el-button>
          <el-popconfirm title="这确定删除吗？"  @onConfirm="deleteBrand(row)">
            <el-button type="danger"  size="small" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <div class="block" style="float: right">
      <!--  
            :current-page="currentPage4" -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[3, 5, 7, 9]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Commodity.total"
        background
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { log } from "util";
export default {
  name: "commodityType",
  data() {
    return {
      dialogFormVisible: false,
      page: 1,
      limit: 9,
      total: 10, //所有数据
      obj: {},
      form: {
        name: "",
        mainImage: "",
        price: "",
      },
      active: true,
      Commodity1: [],
      currentRow: null,
    };
  },
  mounted() {
    this.getcommodityType(this.page, this.limit);
  },
  methods: {
    //上传图片相关的
    handleAvatarSuccess(res, file) {
      //收集图片信息，添加品牌的时候收集的数据
      this.form.mainImage = res.data;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 分页器条数的回调
    handleCurrentChange(page = 1) {
      this.page = page;
      this.getcommodityType(this.page, this.limit);
    },
    // 添加商品信息
    determine() {
      this.dialogFormVisible = false;
      const { form } = this;
      if (this.obj._id) {
        this.$API
          .mockeditor(form, this.obj._id)
          .then((res) => {
            this.$message("编辑成功");
            this.getcommodityType(this.page, this.limit);
          })
          .catch((err) => {
            this.$message("编辑失败");
          });
      } else {
        this.obj = {};
        this.$API
          .mockCommodityadd(form)
          .then((res) => {
            this.$message("新增成功");
            this.handleCurrentChange()
          })
          .catch(() => {
            this.$message("取消新增");
          });
      }

      this.getcommodityType((this.page = 1), (this.limit = 3));
      this.form ={
        name: "",
        mainImage: "",
        price: "",
      }
    },
    // 获取商品信息
    getcommodityType(page, limit) {
      this.$store.dispatch("getCommodity", { page, limit });
    },
    handleSizeChange(limit) {
      this.limit = limit;
      this.getcommodityType();
    },
    //跳转到属性列表 参数列表
    goattrbutelist(row) {
      //  console.log(this.$router);
      this.$router.push({
        path: "/attribute/Attributelist",
        query: {
          _id: row._id,
        },
      });
      //  this.$router.push("/category-list?id=" + e);
    },
    // 删除品牌信息的回调
    async deleteBrand(row) {
      let result = await this.$API.mockCommoditydelete(row._id);
      this.$message("删除成功");
      this.getcommodityType(this.page, this.limit);
    },
    // 编辑
    editer(row) {
      const { form } = this;
      form.name = row.name;
      form.price = row.price;
      this.obj = row;
      this.dialogFormVisible = true;
    },
  },
  computed: {
    ...mapState({
      Commodity: (state) => state.commodityType.Commodity,
    }),
  },
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>